<template>
  <div class="app-container">
    <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <el-button @click="handleView" icon="Back">返回</el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button type="primary" plain icon="Refresh" @click="handleQuery">刷新</el-button>
      </el-col>
    </el-row>

    <el-table v-loading="loading" :data="classList">
      <el-table-column label="姓名" align="center" prop="stuName"/>
      <el-table-column label="学号" align="center" prop="studentId" />
      <el-table-column label="卓越班" align="center" prop="classID">
        <template #default="scope">
          <span>{{ CheekClass(scope.row) }}</span>
        </template>
      </el-table-column>
      <el-table-column label="性别" align="center" prop="stuSex" />
      <el-table-column label="班级" align="center" prop="stuClass" />
      <el-table-column label="年级" align="center" prop="stuGrade"/>
<!--      <el-table-column label="操作" align="center" class-name="small-padding fixed-width">-->
<!--        <template #default="scope">-->
<!--          <el-button link type="primary" icon="Edit" @click="handleUpdate(scope.row)"></el-button>-->
<!--          <el-button link type="primary" icon="Delete" @click="handleDelete(scope.row)"></el-button>-->
<!--        </template>-->
<!--      </el-table-column>-->
    </el-table>
  </div>
</template>

<script setup name="Class" lang="ts">
import { listClass } from '@/apis/system/classMembers'
import { ref, reactive, toRefs} from "vue";
import { ElMessage } from 'element-plus'
import { listClassinfo } from '@/apis/system/classinfo'
import {ClassStore} from '@/stores/class'
import router from '@/router'

const classStore = ClassStore()
const classList = ref([]);
const loading = ref(true);
const total = ref(0);

const data = reactive({
  form: {},
  queryParams: {
    pageNum: 1,
    pageSize: 100000000,
    studentId: null,
    email: null,
    classID: classStore.classInfo.classID,
    stuName: null,
    stuSex: null,
    stuDepartment: null,
    stuClass: null,
    stuSpeciality: null,
    stuGrade: null,
    stuPhone: null,
  },
  rules: {
    studentId: [
      { required: true, message: "学号不能为空", trigger: "blur" }
    ],
    classID: [
      { required: true, message: "所在卓越班班级名称不能为空", trigger: "blur" }
    ],
    stuName: [
      { required: true, message: "姓名不能为空", trigger: "blur" }
    ],
  }
});
function handleView() {
  router.push({ path:  classStore.classInfo.OriginClassPath})
}
const classinfoList = ref< any[]>([]);
const ClassinfoqueryParams= ref({
  pageNum: 1,
  pageSize: 100000000,
})
const { queryParams, form, rules } = toRefs(data);
listClassinfo(ClassinfoqueryParams.value).then(response => {
  classinfoList.value = response.data.data.records;
  total.value = response.data.data.total;
});

function CheekClass(row:any) {
  for(let i=0;i<classinfoList.value.length;i++){
    if(row.classID===classinfoList.value[i].id){
      return classinfoList.value[i].className
    }
  }
}
/** 搜索按钮操作 */
function handleQuery() {
  getList();
}
/** 查询班级信息列表 */
function getList() {
  loading.value = true;
  listClass(queryParams.value).then(response => {
    if (response.data.code === 200){
      classList.value = response.data.data.records;
      total.value = response.data.data.total;
    }else {
      ElMessage({
        message: response.data.msg,
        type: 'error'
      });
    }
    loading.value = false;
  });
}
getList();
</script>

<style scoped>

</style>
